<template>
	<view class="container">
		
		<!-- 搜索框 -->
		<view class="search-box">
			<i class="iconfont icon-sou">&#xe61f;</i>
		    <input class="input" maxlength="50" v-model="keywords"  placeholder="输入场所名称" @confirm="searchList" placeholder-class="placeholder"/>
		   <view class="soubtn" @click="searchProducts">搜索</view>
		</view>
		
		<view class="address" v-for="(item, index) in locationList" :key="index" @click="selectLocation(item)">
		  <view class="info flex-y-center" >
			<view
		      class="font-24 flex-y-center"
		    >
		      <image
		        :src="item.selected?$util.img('image/radio2.png'):$util.img('image/radio.png')"
		        mode=""
		        class="radio"
		      ></image>
		    </view>
		    <view class="font-32 text-bold">
		      {{ item.address }}
		    </view>
		  </view>
		  <view class="bot">
		    <!-- <view
		      class="font-24 flex-y-center"
		    >
		      <image
		        :src="item.selected?$util.img('image/radio2.png'):$util.img('image/radio.png')"
		        mode=""
		        class="radio"
		      ></image>
		    </view> -->
			<view v-if="item.is_default == 1" class="c-78">当前默认地址</view>
			<view v-else class="color-title2" @click.stop="editLocation(item.id)">设为默认地址</view>
		   <view class="flex">
		      <view class="edit c-87" @click.stop="deleteLocation(item.id)">
		        <i class="iconfont">&#xe74a;</i>
		        删除
		      </view>
		      <view class="edit c-87" @click.stop="editLocation(item.id)">
		        修改
		        <i class="iconfont">&#xe695;</i>
		      </view>
		    </view>
			</view>
		  </view>
		  
		  <view class="footer fixfooter" :class="{ 'bottom-safe-area': isIphoneX }">
		  	<view class="submit" @click="addLocation">添加场所</view>
		  </view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isIphoneX: false, //判断手机是否是iphoneX以上
				keywords: '',
				locationList: [],
				location_id: 0,
			}
		},
		onLoad(data) {
			this.isIphoneX = this.$util.uniappIsIPhoneX()
			if(data.location_id) this.location_id = data.location_id


			// this.getList()
		},
		onShow() {
			this.getList()
		},
		methods: {
			searchProducts() {
				this.getList()
			},
			selectLocation(item) {
				uni.$emit('selectLocation', item)
				uni.navigateBack()
			},
			deleteLocation(id) {
				var that = this;
				uni.showModal({
				    title: '提示',
				    content: '确定要删除该场所吗？',
				    success: function(res) {
				        if (res.confirm) {
				            console.log('用户点击确定');
							that.$api.sendRequest({
							  url: "/api/userHealth/delDeviceLocation",
							  data: {id: id},
							  success: res => {
										if(res.code == 0) {
												that.$util.showToast({title: '删除成功'});
												that.getList()
										}else {
												that.$util.showToast({title: res.message});
										}
									}
									
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});


			},
			editLocation(id) {
				this.$util.redirectTo('/otherpages/health/addVenue?id='+id)
			},
			addLocation() {
				this.$util.redirectTo('/otherpages/health/addVenue')
			},
			getList() {
				this.$api.sendRequest({
			      url: "/api/userHealth/getDeviceLocation",
			      data: {
					search: this.keywords,

				  },
			      success: res => {
			        if(res.code == 0) {
						this.locationList = res.data;
						this.locationList.forEach(item => {
							if(this.location_id == item.id) {
								item.selected = true;
							}else {
								item.selected = false;
							}
						})
						this.$forceUpdate();
			        }else {
						this.$util.showToast({title: res.message});
					}
			      }
			    })
			},
		}
	}
</script>

<style lang="scss" scoped>
.search-box {
  position: relative;
  display: flex;
  align-items: center;
  margin: 24rpx 24rpx;
  box-sizing: border-box;
  background: #FFFFFF;
  padding: 2rpx 10rpx 2rpx 20rpx;
  border-radius: 60rpx;
  border: 1px solid $color-title2;
  z-index: 99;
  .icon-sou {
  	  color: $color-title2;
  	  font-size: 40rpx;
  	  margin-right: 10rpx;
  }
  
  .placeholder {
    font-size: $font-size-sub;
    color: #BBBEC9;
  }
  
  .soubtn {
    width: 102rpx;
    height: 54rpx;
    line-height: 54rpx;
    text-align: center;
    background: $color-title2;
    color: #fff;
    border-radius: 40rpx;
    margin-left: auto;
  }
  
}

.address {
  margin: 0 24rpx 24rpx;
  background-color: #fff;
  padding-bottom: 30rpx;
  border-radius: 20rpx;
  .info {
    background: #fff;
    border-radius: 20rpx;
    padding: 30rpx;
    border-bottom: 1px solid #eeeefd;
  }
  .radio {
    width: 34rpx;
    height: 34rpx;
    margin-right: 10rpx;
  }
  .bot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: 20rpx 30rpx 0;
    .edit {
      display: flex;
      align-items: center;
      font-size: 24rpx;
      margin-left: 40rpx;
      image {
        width: 24rpx;
        height: 24rpx;
        margin-right: 10rpx;
      }
    }
  }
  .iconfont {
    color: #878da1;
    font-size: 30rpx;
  }
}
</style>
